import React, { Component } from 'react';
import "../../../styles/Index/Home/Timer.scss"

class Timer extends Component {
    constructor(props){
        super(props);
        this.state = {
            hour:2,
            minutes:15,
            second:59
        }
    }
    componentDidMount(){
        this.timer = setInterval(() => {
            this.state.second--;
            if(this.state.second<0){
                this.state.second = 59;
                this.state.minutes--;
                if(this.state.minutes<0){
                    this.state.minutes = 59;
                    this.state.hour--;
                }
                if(this.state.hour==0){
                    clearInterval(this.timer);
                }
            }
            this.setState({second:this.state.second})
           
        }, 1000);
    }
    addzero(num){
        return num = num<10 ? ('0'+num) : num;
    }
    render() {
        return (
            <div className='timer'>
                <span className="s1">{this.addzero(this.state.hour)}</span>
                <span className="s2">:</span>
                <span className="s1">{this.addzero(this.state.minutes)}</span>
                <span className="s2">:</span>
                <span className="s1">{this.addzero(this.state.second)}</span>
            </div>
        );
    }
}

export default Timer;